<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('班组生产数据列表')" />
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>加热器：</label>
                            <input type="text" name="deviceNo" id="deviceNo"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick=""><i class="fa fa-search"></i>&nbsp;搜索</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12" style="margin-top: 15px; background-color: #ffffff; border-radius: 6px; box-shadow: 1px 1px 3px #00000033">
            <div class="wrapper wrapper-content animated fadeInRight" style="padding: 0">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="ibox float-e-margins" style="margin-top: 15px; margin-bottom: 15px">
                            <div class="ibox-title">
                                <h5>实时监控：</h5>
                            </div>
                            <div class="ibox-content">
                                <div class="echarts" id="chartInstance"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
let prefix = ctx + "device/state";
//定时器
let time1;

function dynamicChart(){
    console.log("----");
    let chartInstance = echarts.init(document.getElementById('chartInstance'))
    let initOption = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: '#ddd'
                }
            },
            backgroundColor: 'rgba(255,255,255,1)',
            padding: [5, 10],
            textStyle: {
                color: '#7588E4',
            },
            extraCssText: 'box-shadow: 0 0 5px rgba(0,0,0,0.3)'
        },
        grid: {
            left: "6%",
            right: "1.5%",
            bottom: "10%"
        },
        legend: {
            top: 20,
            orient: 'horizontal',
            data: ['温度(℃)', '功率(KW)'],
            itemGap: 20,
            textStyle: {
                color: "#0000ff",
                fontSize: '14px',
                padding: [0, 0, 0, 10]
            },
            icon: "rect",
            itemWidth: 53,
            itemHeight: 2
        },
        // x轴数据
        xAxis: {
            type: 'category',
            data: ['09:00:00', '09:00:10', '09:00:20', '09:00:30', '09:00:40', '09:00:50', '09:01:00', '09:01:10', '09:01:20', '09:01:30',
                '09:01:40', '09:01:50', '09:02:00', '09:02:10', '09:02:20', '09:02:30', '09:02:40', '09:02:50',
                '09:03:00', '09:03:10', '09:03:20', "09:03:30", '09:03:40', '09:03:50'
            ],
            boundaryGap: false,
            splitLine: {
                show: true,
                interval: 'auto',
                lineStyle: {
                    color: ['rgba(255,255,255,.18)']
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#609ee9'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 14
                }
            }
        },

        // y轴数据，有几个定义几个即可  position: "left",控制y轴的位置  offset: 60,控制y轴的偏移量
        yAxis: [{
            type: 'value',
            scale: true,
            position: "left",
            splitLine: {
                lineStyle: {
                    color: ['rgba(255,255,255,.18)']
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#F19D7E'
                }
            },
            axisLabel: {
                margin: 10,
                textStyle: {
                    fontSize: 12
                }
            }
        },
            {
                type: 'value',
                //scale true 用来控制Y轴不从0开始
                scale: true,
                position: "left",
                offset: 30,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: true,
                    inside: true
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: 'rgba(255,255,255,.18)',
                        width: 1,
                        type: "solid"
                    }
                },
                axisLabel: {
                    margin: 10,
                    textStyle: {
                        fontSize: 12,
                        color: "#768AFF"
                    }
                }
            }
        ],
        // 有几个Y轴定义几个数据即可
        series: [{

            name: '温度(℃)',
            type: 'line',
            smooth: true,
            showSymbol: false,
            symbol: 'circle',
            yAxisIndex: 0,
            symbolSize: 6,
            data: ['90', '91', '93', '98', '88', '90', '94', '91', '94', '95',
                '99', '93', '98', '96', '98', '96', '100', '102', '99', '101',
                '100', '98',
                '97', '96'
            ],
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(14,41,105,0.5)'
                    }, {
                        offset: 1,
                        color: 'rgba(255,255,255,0)'
                    }], false)
                }
            },
            itemStyle: {
                normal: {
                    color: '#21CBEE'
                }
            },
            lineStyle: {
                normal: {
                    width: 2
                }
            }
        },
            {

                name: '功率(KW)',
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbol: 'circle',
                yAxisIndex: 1,
                symbolSize: 6,
                data: ['50.2', '50.4', '50.6', '50.5', '50.8', '50.5', '51.2', '52.5', '51.6', '51.5',
                    '51.7', '54.5', '51.4', '51.6', '53.8', '51.9', '52.2', '52.1', '50.3', '52.5',
                    '52.4', '52.2',
                    '52.0', '51.6'
                ],
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(252,73,62,.2)'
                        }, {
                            offset: 1,
                            color: 'rgba(252,73,62,0)'
                        }], false)
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#FFA480'
                    }
                },
                lineStyle: {
                    normal: {
                        width: 2
                    }
                }
            },
        ]
    };
    chartInstance.setOption(initOption);
    $(window).resize(chartInstance.resize);
    return dynamicChart;
}


function post4Dynamic() {
    $.post(prefix + "/list", {deviceNo: "101"}, function(result) {
        console.log(result);
        if (result.code == web_status.SUCCESS) {
            dynamicChart();

        } else {
            $.modal.msgError(result.msg);
        }
    });
    return post4Dynamic;
}


$(function() {
    time1 = setInterval(post4Dynamic(), 10000);
});


</script>
</body>
</html>